import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import Button from '../../components/common/button';
import toast from '../../utils/toast';
import { numberFromString, numberBettween } from '../../utils/func';
import GunModal from '../../components/refuel/gun';
import StaionNoMatchModal from '../../components/oilStation/stationNoMatch';

@connect(({ refuel, oilStation }) => {
  return {
    oilList: refuel.get('oilList'),
    currentStation: oilStation.get('currentStation'),
  };
})
class Refuel extends BaseComponent {
  state = {
    station: this.props.location.state && this.props.location.state.station,
    oil: null,
    number: '200.00',
    gun: null,
  }
  componentDidMount() {
    const { station } = this.state;

    if (!station) {
      return this.props.history.replace('home');
    }
    this.props.dispatch({
      type: 'refuel/fetchOilList',
      payload: {
        gasStationId: station.get('id'),
      },
    });
  }
  clickSubmit = () => {
    const { currentStation } = this.props;
    const {
      oil, station, number,
    } = this.state;
    if (Number(number) <= 0) {
      toast('请输入正确的加油金额');
    } else if (!oil) {
      toast('请选择油号');
    } else if (currentStation && currentStation.get('id') !== station.get('id')) {
      this.nomatch.show(station);
    } else {
      this.goPay();
    }
  }

  goPay = () => {
    const {
      oil, station, gun, number,
    } = this.state;
    let search = `?money=${number}&oil=${encodeURIComponent(oil.get('code'))}&mchId=${station.get('mchId')}&type=refuel&stationId=${station.get('id')}`;
    if (gun) {
      search = `${search}&gun=${gun}`;
    }
    this.props.history.push({
      pathname: window.source === 'TAOBAO' ? '/pay/payTmall' : '/pay/pay',
      search,
    });
  }

  selectOil = (oil) => {
    this.setState({ oil });
  }

  numberChanged = (e) => {
    this.setState({
      number: e.target.value,
    });
  }

  checkNumber = () => {
    const { number } = this.state;
    let num = numberFromString(number);
    num = numberBettween({
      max: 10000,
      min: 0,
      value: num,
    });
    this.setState({
      number: num.toFixed(2),
    });
  }

  clickPlus = () => {
    const { number } = this.state;
    const newNum = numberBettween({
      max: 10000,
      min: 0,
      value: `${numberFromString(number) + 100}`,
    });
    this.setState({
      number: newNum.toFixed(2),
    });
  }

  selectGun = (gun) => {
    this.setState({ gun });
    this.modal.close();
  }

  showGunModal = () => {
    this.modal.show();
  }

  rechoose = () => {
    this.props.history.push('home');
  }

  render() {
    const {
      station, oil, number, gun,
    } = this.state;
    if (!station) {
      return null;
    }

    const { oilList } = this.props;
    const oilCells = oilList.map((o, index) => {
      return (
        <div className={`oil-cell ${oil === o ? 'active' : ''}`} key={index} onClick={() => this.selectOil(o)}>
          {o.get('name')}
        </div>
      );
    });

    let gunView;
    if (gun) {
      gunView = (
        <div className="text">{gun}号</div>
      );
    }
    return (
      <div className="refuel-cq">
        <div className="content">
          <div className="header">
            <div className="station-row">
              <div className="title">已选择：</div>
              <img src={station.getLogo()} alt="" className="logo" />
              <div className="station">{station.get('name')}</div>
              <div className="rechoose" onClick={this.rechoose}>重新选站</div>
            </div>
            <div className="input-title">输入加油金额</div>
            <div className="input-row">
              <div className="unit">&#65509;</div>
              <input className="input" type="number" onChange={this.numberChanged} value={number} onBlur={this.checkNumber} />
              <i className="iconfont icon-plus" onClick={this.clickPlus} />
            </div>
          </div>
          <div className="oil-view">
            <div className="title">选择油品标号</div>
            <div className="oil-list">
              {oilCells}
            </div>
          </div>
          <div className="gun-view" onClick={this.showGunModal}>
            <div className="title">选择枪号</div>
            {gunView}
            <i className="iconfont icon-arrow" />
          </div>
        </div>
        <div className="btn-view">
          <div className="money-view">
            <p className="text"><span className="unit">&#65509;</span>{number}</p>
          </div>
          <Button title="提交订单" className="action-btn" clickFunc={this.clickSubmit} />
        </div>
        <GunModal ref={modal => this.modal = modal} selectFunc={this.selectGun} />
        <StaionNoMatchModal ref={nomatch => this.nomatch = nomatch} goOnFunc={this.goPay} reChooseFunc={this.rechoose} />
      </div>
    );
  }
}

export default Refuel;
